
<template>
<div class="messageBox showFixed">
    <el-card :body-style="{ padding: '0px' }">
      <div class="header" >
        <h2>消息通知</h2>
        <span>全部已读</span>
      </div>
      <div class="msgList">
        <ul class="msgUl" >
          <div class="text more" ref="more">
            占位
          </div>
          <template v-for="(item,index) in newsList">
            <li  :key="item.id" v-if="item.link">
              <div class="left">
                <h2>司机入住成功{{item.name}}</h2>
                <div>
                  <p ref="textContainer" :class="{ retract: item.status }" :style="{ 'max-height': item.status ? textHeight : '' }">
                    {{item.context}} <span class="lookDetail" @click="toDetail(item.link)">查看详情<i class="el-icon-arrow-right"></i></span>
                    </p>
                   <span
                    v-if="item.status !== null"
                    class="link"
                    @click="more(index)"
                    >{{ item.status ? "展开" : "收起" }}</span>
                  </div>
              </div>
              <div class="right"><span>{{item.send_time}}</span></div>
            </li>
          </template>
          
        </ul>
      </div>
    </el-card>

  </div>
  
</template>
<script>
export default {
  data () {
    return {
      newsList:{},
      page:{
        page:1,
        per_page:10,
      },
      textHeight: '',
      
    }
  },
  created () {
    this.getNewsList()
  },
  watch:{
	

	},
  mounted () {
    console.log(this);
    this.getNewsList().then(() => {
        console.log(this.newsList);

    this.newsList.forEach((ele, index) => {
      this.$set(
        this.newsList,
        index,
        Object.assign({}, ele, { status: null })
      )
    })
      // DOM 加载完执行
      this.$nextTick(() => {
        this.calculateText()
        //console.log(this.historyList)
      })
    });

      

    
 
    window.onresize = () => {
      this.newsList.forEach((ele, index) => {
        this.$set(
          this.newsList,
          index,
          Object.assign({}, ele, { status: null })
        )
      })
      setTimeout(() => {
        this.calculateText()
      }, 0)
    }
  },
  methods: {
    getNewsList(){
      // const page=this.page
      // this.$http.loginApi.newsList(page).then(res => {
      //   console.log(res);
      //   if(res.status == 200){
      //     this.newsList=res.data.result
      //   }
      // })
      return Promise.resolve({}).then(() => {
        const page=this.page
        return this.$http.loginApi.newsList(page).then(res => {
          console.log(res);
          if(res.status == 200){
            this.newsList=res.data.result
          }
        })
      })
    },
    //  api.workinfo(param).then(response => {
    //           const data = response.data;
    //           this.list = data
    //       });
    // 计算文字 显示展开 收起
    calculateText () {
      // 获取一行文字的height 计算当前文字比较列表文字
      let oneHeight = this.$refs.more.scrollHeight
      let twoHeight = oneHeight * 2 || 40
      this.textHeight = `${twoHeight}px`
      let txtDom = this.$refs.textContainer
      for (let i = 0; i < txtDom.length; i++) {
        let curHeight = txtDom[i].offsetHeight
        if (curHeight > twoHeight) {
          this.$set(
            this.newsList,
            i,
            Object.assign({}, this.newsList[i], { status: true })
          )
        } else {
          this.$set(
            this.newsList,
            i,
            Object.assign({}, this.newsList[i], { status: null })
          )
        }
      }
    },
    more (index) {
      this.newsList[index].status = !this.newsList[index].status
    },
    toDetail(val){
      if(val == 'DRIVER'){
        this.$router.push('/driver')
      }else if(val == 'ORDER'){
        this.$router.push('/orders')
      }else if(val == 'TRUCK'){
        this.$router.push('/truck')
      }
    }
    
  }
}
</script>
<style scoped>
  .list {
    padding: 5px 0;
    border-bottom: 1px solid #eaeaea;
  }
  .text {
    position: relative;
    color: #000;
    font-size: 14px;
  }
  .more {
    visibility: hidden;
  }
  .link {
    font-size: 12px;
    color: #2d95fe;
  }
  .retract {
    position: relative;
    overflow: hidden;
  }
 
  .retract:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 2px;
    width: 25px;
    padding-left: 25px;
    background: linear-gradient(to right, transparent, #fff 45%);
  }



  .messageBox{
  margin-top: 24px;
}
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #EDEDED;
  padding: 16px 24px;
}
.header h2{
  font-size: 16px;
  color: #181C27;
}
.header span{
  color: #2878FF;
  font-size: 14px;
  cursor: pointer;
}
.msgList{
  padding: 0 24px 16px 24px;
}
.msgUl li{
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  background: #F2F6FC;
  padding:16px 24px;
  border-radius: 8px;
}
.msgUl li h2{
  font-size: 14px;
  color: #181C27;
  margin-bottom: 10px;
}
.msgUl li div p{
  color: #181C27;
  font-size: 12px;
}
.lookDetail{
  padding-left: 4px;
  color: #2878FF;
  font-size: 12px;
  cursor: pointer;
}
</style>
